import React, { Component } from 'react'
import './style.scss'
import NavTab from '@/components/navTab'
import WuIcon from '@/components/wuIcon'
import { getCookbookIdToInfoApi } from '@/service/cookbookApi'
import Content from './ui/Content'
import Skeleton from './ui/Skeleton'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import connect from './connect'

@connect
class Index extends Component {
  state = {
    info: null
  }

  async componentDidMount() {
    const id = this.props.match.params.id || 0
    const res = await getCookbookIdToInfoApi(id)
    this.setState({
      info: res
    })
  }

  render() {
    const { info } = this.state
    const { token, userid } = this.props
    return (
      <div className='detail'>
        <NavTab
          // title={(info && info.name) || ''}
          title={info?.name || ''}
          leftText={<WuIcon type='icon-fanhui' />}
          onLeftClick={() => {
            this.props.history.goBack()
          }}
        />
        <SwitchTransition>
          <CSSTransition
            key={info === null ? 'skeleton' : 'content'}
            classNames='fade'
            timeout={500}
          >
            {info === null ? (
              <Skeleton />
            ) : (
              <Content history={this.props.history} info={info} token={token} userid={userid} />
            )}
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}

export default Index
